import React from 'react'
import { PieChart } from 'components/Charts'
import { getSuitableUnit, getValueByUnit } from 'utils/monitoring'
import style from './pieCard.scss'

const PieCard = ({ used, total, title, unitType }) => {
  const unit = getSuitableUnit(total, unitType) || unit
  const used1 = getValueByUnit(used, unit)
  const total1 = getValueByUnit(total, unit) || used
  const colors = {
    color: used / total > 0.75 ? '#fea33b' : '#3c8cff',
  }
  return (
    <div className={style.content}>
      <div className={style.chart}>
        <PieChart
          width={48}
          height={48}
          dataKey="value"
          data={[
            {
              name: '1',
              itemStyle: {
                fill: used1 / total1 > 0.75 ? '#fea33b' : '#3c8cff',
              },
              value: used1,
            },
            {
              name: '2',
              itemStyle: {
                fill: '#CCCCCC',
              },
              value: total1 - used1,
            },
          ]}
        />
      </div>

      <div className={style.middle}>
        <p>{title}</p>
        <p>
          <span style={{ fontSize: '16px' }}>{`${Math.round(
            (used1 * 100) / total1
          )}%`}</span>
        </p>
      </div>
      <div className={style.status}>
        {used1 / total1 > 0.7 ? (
          <span style={colors}>超负荷</span>
        ) : (
          <span style={colors}>正常</span>
        )}
      </div>
    </div>
  )
}

export default PieCard
